<template>
    <div class="ads-dtData-content">
        <div class="scoll-view">
            <div class="ads-left-con">
                <div class="place-view1" :style="{backgroundImage:'url('+dtData.adArImg+')'}">
                    <!-- <img :src="dtData.adArImg" /> -->
                    <i class="stars" />
                </div>
            </div>
            <div class="ads-right-con" v-if="requestOver">
                <div class="name">
                    {{dtData.adPlaceTitle}}
                    
                </div>
                 <div class="city-name">
                    <img src="/images/shop/l.png" />
                    {{dtData.adAdress}}</div>
                <div class="user-view"> 
                    <!-- v-if="chainInfo" -->
                        <div class="item" :style="{width:styleCss?'100%':'48%'}" v-if="dtData.adPlaceOwnerName">
                            <div class="title">TITLE HOLDING</div>
                            <div class="dtname">{{dtData.adPlaceOwnerName}}</div>
                        </div>
                        <!-- <div class="line"></div> -->
                        <div class="item" :style="{width:styleCss?'100%':'48%'}" v-if="chainInfo.contractAddress">
                            <div class="title">EARNINGS HOLDING</div>
                            <div class="dtname">{{formatAddress(chainInfo.contractAddress)}}</div>
                        </div>
                </div>
                <div class="max-title">Ad Slot Traffic</div>
                <div class="ads-visits-box">
                    <uv-pv-visits :id="dtData.adPlaceId" visitType='6'/>
                </div>
                <!-- placeStatus投放状态：1、未投放；2、已投放； -->
                <div class="btn-view" >
                     <div class="btn-views" v-if="dtData.placeStatus==2"  @click="lookVideo"></div>
                     <div class="btn-setUp" @click="btnSetUp" v-if="dtData.adPlaceOwnerId==dtData.adPlaceLesseeId"></div>
                     
                <!-- lesseeStatus	出租状态：1未出租，2已出租 -->
                     <div class="btn-usufruct" v-if="dtData.lesseeStatus==1&&dtData.adPlaceOwnerId==dtData.adPlaceLesseeId" @click="btnUsufruct"></div>
                     <div class="cancel-usufruct" v-if="dtData.lesseeStatus==2&&dtData.adPlaceOwnerId==dtData.adPlaceLesseeId"  @click="cancelUsufruct"></div>
                </div>
                
                <!-- <template v-if="type==2">
                    <user-ads-con :detail='dtData'/>
                </template>
                <template v-else>
                    <released ref="addView" v-if="dtData.placeStatus==2" :detail='dtData'/>
                    <not-released ref="addView" v-else :detail='dtData'/>
                </template> -->
            </div>
        </div>
         <!-- <div class="btn-add" @click="btnAdd"></div> -->
    </div>
</template>

<script>
import { reactive,toRefs,ref,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import imgBox from '@/components/imgBox.vue'
import chainInfo from '@/components/chainInfo.vue'
import released from './released.vue'
import notReleased from './notReleased.vue'
import userAdsCon from './userAdsCon.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import confirm from '@/utils/confirm.js'
export default {
    components:{
       Title,
       twoTitle,
       imgBox,
       chainInfo,
       released,
       notReleased,
       uvPvVisits,
       userAdsCon
    },
    props:{
        detail:Object,
        id:'',
        type:{
            type:Number,
            default:1 // 1全球广告位详情，2广告位详情
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const addView = ref(null);
        const {proxy} = getCurrentInstance()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            dtData:props.detail, // 
            chainInfo:'',
            requestOver:false,
            styleCss:computed(()=>{
                return (state.chainInfo!='' && state.chainInfo.contractAddress!='' && state.dtData.adPlaceOwnerName!='')?false:true
            }),
        })

        onMounted(()=>{
            if(props.id){
                store.dispatch('ad/get_adspace_detail',props.id).then(res=>{
                    state.dtData = res.data
                    state.requestOver = true

                     //广告位-添加PV PV ,访问量
                     if(res.data.records.length>0){
                         res.data.records.map((item)=>{
                            store.dispatch('ad/add_ad_place_pv',{
                                adPlaceId:props.id,
                                adPlaceJobRecordId:item.adPlaceJobRecordId,
                                walletAddress:state.userInfo.walletAddress || ''
                            }) 
                         })
                     }else{
                          store.dispatch('ad/add_ad_place_pv',{
                                adPlaceId:props.id,
                                walletAddress:state.userInfo.walletAddress || ''
                            }) 
                     }
                })
                // store.dispatch('ad/get_ads_chain_info',props.id).then(res=>{
                //     const cdata = res.data || {}
                //     if(res.success && res.data){
                //         state.chainInfo = {
                //             ownerName:cdata.adPlaceOwnerName || '',
                //             ownerSuccessTime:cdata.handleTime || '',
                //             chainName:cdata.chainName || '',
                //             tokenId:cdata.bornId || '',
                //             contractAddress:cdata.contractAddress || '',
                //             tokenStandard:cdata.tokenStandard || ''
                //         }
                //     }else{
                //         state.chainInfo = ''
                //     }
                // })
            }
        })

        const formatAddress = (str)=>{
            if(str){
                const srt1 = str.substr(0,8)
                const srt2 = str.substr(str.length-8,8)
                return srt1+'......'+srt2
            }else{
                return ''
            }
        }

        const lookVideo = ()=>{
            console.log("appParams:",state.dtData)
            try {
                H5CallAPPFuction('showAdVideo',JSON.stringify(state.dtData)) 
            } catch (error) {
                toast('调用app播放失败')
            }
        }
         const btnSetUp = ()=>{
            router.push({path:'/ad/setUp',query:{id:props.id,arLandmarkId:state.dtData.arLandmarkId,typeUrl:1}})
        }
        const btnUsufruct = ()=>{
            router.push({path:'/ad/usufruct',query:{id:props.id,arLandmarkId:state.dtData.arLandmarkId}})
        }
        const cancelUsufruct = ()=>{
              confirm({ text: 'Are you sure you want to cancel the transfer' }).then(() => {
                        store.dispatch('customer/cancelLessee',{
                             adPlaceId:props.id,
                            walletAddress:state.userInfo.walletAddress
                        }).then(res=>{
                            if(res.success){
                                toast('success')
                            }else{
                                toast(res.message)
                            }
                        })
              })
        }
        
        
        return{
            ...toRefs(state),
            formatAddress,
            lookVideo,
            addView,
            btnSetUp,
            btnUsufruct,
            cancelUsufruct
        }
    }
}
</script>

<style lang="scss" scoped>
    .ads-dtData-content{
        display: flex;
        width: 100%;
        height: 85%;
        line-height: normal;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        margin-top:50px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        // overflow: hidden;
        // overflow-x: auto;
        .scoll-view{
             display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling:touch;
            width: 100%;
           height: 100%;
        }
        .introduce{
            padding: 14px 0 15px 0;
            font-size:24px;
            &.introduce2{
                padding-bottom: 20px;
            }
        }
                  .stars{
                        width: 32px;
                        height: 32px;
                        background: url(/images/gloabAdSplace/stars.png) left top no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        top:10px;
                        left:10px;
                        z-index:99;
                }
        .pricelocation{
            display: flex;
            height: 80px;
            align-items: center;
            .price{
                flex: 1;
                img{
                    display: block;
                    float: left;
                    width: 20px;
                    margin: 3px 10px 0 0;
                }
                b{
                    font-weight: 500;
                    color: #82FEF4;
                }
            }
            .location{
                i{
                    float: left;
                    font-size: 30px;
                    margin: 3px 10px 0 0;
                }
            }
        }
        .name{
            display: flex;
            align-items: center;
            font-size: 32px;
            span{
                display: block;
                height:34px;
                text-align: center;
                line-height: 34px;
                padding: 0 10px;
                background: rgba(103,248,255,0.2);
                border-radius: 17px;
                opacity: 1;
                border: 1px solid rgba(103,248,255,0.8);
                font-size: 14px;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #67F8FF;
                margin: 0 0 0 12px;
            }
        }
        .ads-visits-box{
            margin: 10px 0 20px 0;
            padding: 0 0 20px 0;
        }
        .ads-left-con{
            overflow: hidden;
            overflow-y: auto;
            padding: 20px;
            width: 440px;
            background-image: url(/images/gloabAdSplace/bg1.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .max-title{
                font-size:26px;
                color: #fff;
                padding-top:20px;
            }
            .name{
                color: #67F8FF;
                font-weight:600;
            }
            .place-view1{
                display: flex;
                justify-content: flex-start;
                align-self: center;
                align-items: center;
                height:100%;
                padding:0 6px;
                margin: 0;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
            }
        }
        .ads-right-con{
            width: 800px;
            padding: 20px;
            margin-left:30px;
            overflow: hidden;
            overflow-y: auto;
             background-image: url(/images/gloabAdSplace/bg2.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
               .city-name{
                  color: #fff;
                  font-size:24px;
                   img{
                    height:20px;
                  }
            }
          .max-title{
                font-size:26px;
                color: #fff;
                padding-top:10px;
            }
            .name{
                  color: #fff;
                  font-size:28px;
                  padding-top:10px;
            }
        .user-view{
                display: flex;
                justify-content: space-between;
                position: relative;
                margin-top:10px;
                .line{
                    position: absolute;
                    width:1px;
                    height:60px;
                    left:50%;
                    top:50%;
                    margin-left:-5px;
                    margin-top:-30px;
                }
                .item{
                    width:48%;
                     padding: 5px 0;
                    text-align: center;
                      background-color: #67F8FF50;
                   // background: rgba(103,248,255,0.2000);
                    border:1px solid #67F8FF;
                }
                .title{
                    font-size:20px;
                    color:#ffffff50;
                }
                .dtname{
                    font-size:24px;
                    color:#67F8FF;
                }
        }

        .btn-view{
            display: flex;
            justify-content: flex-start;
            .btn-usufruct,
            .cancel-usufruct,
            .btn-setUp,
            .btn-views{
                width: 160px;
                height:60px;
                background-image: url(/images/detail/viewAd.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin:0 20px 0 0;
            }
            .btn-setUp{
                background-image: url(/images/detail/setup.png);
            }
             .btn-usufruct{
                background-image: url(/images/detail/usufruct.png);
                width:252px;
            }
            .cancel-usufruct{
                width:280px;
                 background-image: url(/images/detail/cancel-usufruct.png);
            }
        }
    }
}

    .chain-info-dg-box{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        .chain-info-wrap{
            position: relative;
            z-index: 100;
            width: 700px;
            height: 90%;
            overflow: hidden;
            background: url(/images/dtData/hb.png) left top no-repeat;
            background-size: 100% 100%;
            background-color: #023178;
            border-radius:40px ;
            padding: 90px 20px 40px 20px;
            .close{
                position: absolute;
                z-index: 100;
                right: 30px;
                top: 30px;
                font-size: 40px;
                color: #67F8FF;
            }
            .ciScrollBox{
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }
    .propVisitsDgWrap{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .propDgTitle{
            height: 60px;
            line-height: 60px;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 30px;
            em{
                font-style: normal;
                color: #7EE7FF;
                font-weight: 700;
            }
        }
        .propVisitsDgMain{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
  .btn-add{
             background-image: url(/images/add.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width:180px;
            height:60px;
            position: absolute;
            bottom:20px;
            left: 720px;
            z-index:999;
        }
</style>